<template>
	<div class="layout-pd">
    <zh-space style="padding-top: 10px">
      <zh-card title="">
				<zh-form ref="queyFormRef" :model="state.queryParam">
          <zh-form-input
              prop="modelCode"
              label="模版编码"
              placeholder="精确查询"
              v-model="state.queryParam.modelCode"
            ></zh-form-input>
					<zh-form-input
						prop="modelName"
						label="模版名称"
						placeholder="支持模糊查询"
						v-model="state.queryParam.modelName"
					></zh-form-input>
          <template v-if="state.advanced">
            <zh-form-cascader
              prop="excelClassCode"
              label="模版分类"
              placeholder="请选择"
              v-model="state.queryParam.excelClassCode"
              :props="{checkStrictly: true,emitPath:false}"
              :options="state.classSelectTreeData"
            ></zh-form-cascader>
						<zh-form-choose-org prop="orgId" label="所属组织" v-model="state.queryParam.orgId"></zh-form-choose-org>
            <zh-form-cascader
              prop="areaCode"
              label="行政区划"
              placeholder="请选择"
              v-model="state.queryParam.areaCode"
              :props="{checkStrictly: true,emitPath:false}"
              :options="state.areaCodeSelectTreeData"
            ></zh-form-cascader>
            <zh-form-select
              prop="appId"
              :lazy="true"
              label="所属应用"
              v-model="state.queryParam.appId"
              :fieldNames="{ label: 'appName', value: 'appId' }"
              funcCode="application0012"
              searchField="appName"
            ></zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="queyFormRef" :table-ref="tableListRef">
            <el-checkbox true-label="1" false-label="0" v-model="state.queryParam.historyFlag"><span style="padding-right:10px" >查询其他版本</span></el-checkbox>
          </zh-form-query>
				</zh-form>
			</zh-card>
      <zh-table
				ref="tableListRef"
				title=""
        funcCode="excelModel0007"
				:columns="state.tableColumn"
				:disabled="false"
        :stripe="false"
        :rowConfig="{keyField:'id'}"
			>
        <template #header_button>
          <zh-button button-type="add"  v-func:excelModel0004 @click="addModel()">新建</zh-button>
          <el-tooltip
            effect="dark"
            content="选择表格中的一条模版复制为新版本的初始数据"
            placement="top"
          >
          <zh-button v-func:excelModel0012 button-type="add" @click="copyModel()">复制新建版本</zh-button>
          </el-tooltip>
        </template>
        <template #version_default="{ row }">
          <span style="padding-right:10px">{{row.excelVersion}}</span><el-tag  effect="dark" v-if="row.newFlag==='1'">默认使用</el-tag>
        </template>
        <template #operate_default="{ row }">
          <el-tooltip
            effect="dark"
            content="查看模版信息"
            placement="top"
          >
            <zh-button v-func:excelModel0002 button-type="query" link @click="queryModel(row)"></zh-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="修改模版信息"
            placement="top"
          >
            <zh-button  v-func:excelModel0005 button-type="edit" link @click="editModel(row)"></zh-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="设置默认使用"
            placement="top"
          >
            <zh-button v-func:excelModel0011 icon="ele-Setting" link @click="setNewFlag(row)"></zh-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="excel模版字段"
            placement="top"
          >
            <zh-button v-func:excelModel0107 type="success" icon="ele-List" link @click="openParams(row)"></zh-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="下载模版"
            placement="top"
          >
            <zh-download-excel v-func:excelModel0001 :modelCode="row.modelCode" :version="row.excelVersion" link></zh-download-excel>
          </el-tooltip>

          <el-popconfirm title="是否确认删除该模版?"  @confirm="delModel(row)">
            <template #reference>
                <zh-button v-func:excelModel0006 type="danger" link buttonType="del"></zh-button>
            </template>
          </el-popconfirm>
				</template>
			</zh-table>
    </zh-space>
    <zh-dialog :title="state.modalTitle"  width="80%" v-model="state.visible" >
			<ExcelModelForm ref="excelModelPage" v-model="state.visible" :showFlag="state.showFlag" :modelInfo="state.selectRow" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">{{state.showFlag?'关闭':'取消'}}</el-button>
          <el-button v-if="!state.showFlag" type="primary" @click="saveModel">
            保存
          </el-button>
        </span>
      </template>
    </zh-dialog>
    <zh-dialog title="复制新建版本"  width="35%" v-model="state.copyVisible" @confirm="saveCopyModel">
      <zh-form ref="copyModelFormRef"  :model="state.copyForm" :span="24" :rules="state.copyRules">
			<zh-form-input
				prop="modelCode"
        :disabled="true"
				label="模版编号"
				placeholder="请输入模版编号"
				v-model="state.copyForm.modelCode"
			></zh-form-input>
      <zh-form-input
				prop="modelName"
				label="模版名称"
        :disabled="true"
				placeholder="请输入模版名称"
				v-model="state.copyForm.modelName"
			></zh-form-input>
      <zh-form-input
				prop="excelVersion"
				label="版本"
				placeholder="请输入模版版本"
				v-model="state.copyForm.excelVersion"
			></zh-form-input>
      </zh-form>
		</zh-dialog>
    <el-drawer
      v-model="state.drawer"
      :title="state.selectRow.modelName+'('+state.selectRow.excelVersion+')~模版字段维护'"
      direction="rtl"
      destroy-on-close
      :before-close="handleClose"
      size="80%"
    >
      <ExcelParamsForm ref="excelParamsFormRef" :modelInfo="state.selectRow"></ExcelParamsForm>
      <template #footer>
        <div style="flex: auto;margin-bottom: 10px;margin-right:30px">
          <el-button @click="resetClick">重置</el-button>
          <el-button v-func:excelModel0108 type="primary" @click="confirmClick">保存</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup name="excelModelManager">
import ExcelModelForm from './component/ExcelModelForm.vue';
import ExcelParamsForm from './component/ExcelParamsForm.vue';
import { ElMessage,ElMessageBox } from 'element-plus';
//------------------接收传入参数(组件)-------------------

//------------------定义子组件---------------------------
const queyFormRef=ref()
const tableListRef=ref()
const excelModelPage=ref()
const excelParamsFormRef=ref()
const copyModelFormRef=ref()
//------------------内部变量定义-------------------------
const state=reactive({
  advanced:false,
  drawer:false,
  copyVisible:false,
  copyForm:{} as any,
  copyRules:{
    excelVersion: [
      {
        required: true,
        message: '请输入模型版本',
        trigger: 'blur',
      },
    ],
  },
  queryParam:{newFlag:'1'} as any,
  flagDictData:[{dictKey:'1',dictValue:'是'},{dictKey:'0',dictValue:'否'}],
  areaCodeSelectTreeData:[],
  classSelectTreeData:[],
  tableColumn:[
    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号', },
    { field: 'modelCode', title: '模版编号', fixed: 'left', align: 'center', width: 150 },
		{ field: 'modelName', title: '模版名称', fixed: 'left', align: 'center', width: 200 },
    { field: 'excelVersion', title: '版本', align: 'center',  width: 160,slots: {default: 'version_default'}},
    { field: 'excelType', title: '文件类型', align: 'center',  width: 80},
    { field: 'excelClassName', title: '模版分类',  align: 'center', width: 150 },
    { field: 'excelMode', title: '读取模式',  align: 'center', width: 150 },
    { field: 'remarks', title: '备注',  align: 'center', width: 300 },
    { field: 'orgName', title: '所属组织',  align: 'center', width: 150 },
    { field: 'areaName', title: '所属行政区划',  align: 'center', width: 150 },
    { field: 'appName', title: '所属应用',  align: 'center', width: 150 },
    { field: 'operate', title: '操作', align: 'center',fixed: 'right',  width: 240,slots: {default: 'operate_default'}},
  ],
  selectRow:{} as any,
  visible:false,
  modalTitle:"操作",
  showFlag:false,
})
//------------------定义调用方法-------------------------
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}
function getClassTree() {
	setTimeout(() => {
		$api.common.send.post('excelClass0007', {}).then((res) => {
			state.classSelectTreeData = res.result;
		});
	}, 20);
}
const onClose=()=>{
  state.visible = false;
}
const addModel=()=>{
  state.modalTitle = '新增excel模版信息';
  let params={newFlag:'0'}
  state.selectRow=params
  state.showFlag=false;
  state.visible = true;
}
const copyModel=()=>{
  let row=tableListRef.value.getCurrentRecord();
  if(!row||!row.modelCode){
    ElMessage.warning('请先选择一条复制的数据');
    return
  }
  let copyForm={id:row.id,modelCode:row.modelCode,modelName:row.modelName}
  state.copyForm=copyForm
  state.copyVisible = true;
}
const saveCopyModel=()=>{
  $api.common.send.post('excelModel0012',state.copyForm).then(()=>{
    ElMessage.success('复制新增成功！');
    state.copyVisible = false;
    state.queryParam.historyFlag='1'
    state.queryParam.modelCode=state.copyForm.modelCode
    refreshTable();
  });
}
const queryModel=(row)=>{
 state.modalTitle = '查看excel模版信息';
 state.selectRow=row
 state.showFlag=true
 state.visible = true;
}
const editModel=(row)=>{
  state.modalTitle = '修改excel模版信息';
  state.selectRow=row
  state.showFlag=false;
  state.visible = true;
}
const setNewFlag=(row)=>{
  ElMessageBox.confirm(
    '是否确认将此版本('+row.excelVersion+')设置为默认导出版本?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  )
    .then(() => {
      sendSetNewFlag(row)
    })
    .catch(() => {
      
    })
 
}
const sendSetNewFlag=(row)=>{
  let params={id:row.id}
  $api.common.send.post('excelModel0011',params).then(()=>{
    ElMessage.success('设置成功！');
    refreshTable();
  });
}
const openParams=(row)=>{
  state.selectRow=row
  state.drawer = true;
}
const delModel=(row)=>{
  let params={id:row.id}
  $api.common.send.post('excelModel0006',params).then(()=>{
    ElMessage.success('删除成功！');
    refreshTable();
  });
 
}
const handleClose = (done: () => void) => {
  if(!excelParamsFormRef.value.isEdit()){
    done()
    return
  }
  ElMessageBox.confirm('是否确认关闭字段编辑页面?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const saveModel=()=>{
  excelModelPage.value.save().then(() => {
    state.visible = false;
    state.queryParam.historyFlag='1'
    tableListRef.value.query(state.queryParam)
	});
}
const refreshTable=()=>{
  tableListRef.value.refresh(state.queryParam)
}
const resetClick=()=>{
  excelParamsFormRef.value.reset()
}
const confirmClick=()=>{
  excelParamsFormRef.value.save()
}
//------------------初始化------------------------------
onMounted(()=>{
  getAreaCodeData();
  getClassTree();
  nextTick(()=>{
    tableListRef.value.query(state.queryParam)
  })
})
//------------设置给父组件调用的数据/方法(组件)-----------

</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
